<template>
    <div>
        <el-card class="box-card">
           <!-- <div @click="addDorm" class="lou-item add-lou">
                <i class="el-icon-plus avatar-uploader-icon"></i>
           </div> -->
            <div v-for="(item,index) in dormList" 
            :key="index"
             class="lou-item">
                <!-- <div class="has-fence" v-if="item.hasElectorcfence">有围栏</div>
                <div  class="has-fence" v-else>无围栏</div> -->
                <div class="lou-name">{{item.name}}</div>
                <div class="lou-data">宿舍数：{{item.useRoomCount}} / {{item.roomCount}}</div>
                <div class="lou-data">住宿生数：{{item.studentCount}} / {{item.bedCount}}</div>
                <div class="lou-data">
                     <!-- <el-button @click.stop="toRoomList(item)" type="text">房间管理</el-button> -->
                      <el-button @click.stop="selectTeam(item)" type="text">下发数据</el-button>
                </div>
                <!-- <div class="lou-data">
                      <el-button @click.stop="group(item)" type="text">住宿舍分组</el-button>
                 
                        <el-button @click="toAdminer(item)" type="text">添加楼管</el-button>
                </div>
                <div class="lou-data">                  
                    
                    <el-button @click.stop="fence(item)" type="text" style="color:#67C23A;">设置围栏</el-button>
                    <el-button @click.stop="deleteDorm(item)" type="text" style="color:#F56C6C;">删除</el-button>
                </div> -->
            </div>
           
            <div class="page-p">
                <el-pagination
                background
                layout="total, prev, pager, next"
                :page-size="PageSize"
                :current-page="PageNum"
                :total="total"
                @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </el-card>
        <addDorm></addDorm>
        <editDorm></editDorm>
        <adminer @selectAdminer='selectAdminer'></adminer>
        <wifi></wifi>

        <addDevice></addDevice>
        <selectTeam></selectTeam>
        <selectDevice></selectDevice>
        <group></group>
        <addGroup></addGroup>
        <bed></bed>
    </div>
</template>
<script>

import cvueDialog from '@/components/cvue-dialog'
import addDorm from './addDorm'
import editDorm from './editDorm'
import adminer from './adminer'
import wifi from './wifi'
import addDevice from './addDevice'
import selectTeam from './selectTeam'
import selectDevice from './selectDevice'
import group from './group'
import addGroup from './addGroup'
import bed from './bed'
export default {
    name: 'dormList',
    components: {
        cvueDialog, 
        addDorm, 
        editDorm, 
        adminer, 
        wifi, 
        addDevice, 
        selectTeam, 
        selectDevice, 
        group,
        bed,
        addGroup
    },
    computed: {
        PageNum () {
            return this.$store.state.dorm.PageNum
        },
        PageSize () {
            return this.$store.state.dorm.PageSize
        },
        total () {
            return this.$store.state.dorm.total
        },
        dormList () {
            return this.$store.state.dorm.dormList
        }
    },
    data () {
        return {
           
        }
    },
    methods: {
       addDorm () {
            this.$store.state.dorm.addDormVisible = true
        },
        addDevice () {
            this.$store.state.dorm.addDeviceVisible = true
        },
        selectTeam (item) {
            this.$store.state.dorm.curDorm = item
            this.$store.state.dorm.selectTeamVisible = true
        },
        group (item) {
            this.$store.state.dorm.curDorm = item
            this.$store.state.dorm.groupVisible = true
        },
        toBed (item) {
             this.$store.commit('dorm/setCurDorm', item)
              this.$store.state.dorm.bedVisible = true
        },
        toAdminer (item) {
            this.$store.state.dorm.curDorm = item
            this.$store.commit('dorm/showAdminer')
        },
        selectAdminer (data) {
           var a = this.$store.state.dorm.adminerSelection
            console.log(data)
        },
        editDorm (item) {
            this.$store.state.dorm.editDorm = item
            this.$store.commit('dorm/showEditDorm')
        },
        fence (item) {
            this.$store.state.dorm.curDorm = item
            this.$router.push('fence')
        },
        deleteDorm (item) {
            this.$confirm('确定删除“' + item.name + '”?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('dorm/deleteDorm', item.id).then(res => {
                    this.$message.success('删除成功')
                })
            })
        },
        toRoomList (item) {
            this.$store.commit('dorm/setCurDorm', item)
            this.$router.push('roomList')
        },
        handleCurrentChange (num) {
            this.getList(num)
        },
        getList (pageNum) {
             this.$store.dispatch('dorm/getDorm', {
                PageNum: pageNum
            })
        }
    },
    mounted () {
       this.getList(1)
    }
}
</script>
<style scoped>
.lou-item{
    display: inline-block;
    margin: 0 20px 20px 0;
     width: 200px;
    height: 265px;
   position: relative;
    border: 1px solid #ccc;
    vertical-align: middle;
    cursor: pointer;
    transition: 0.2s;
}
.has-fence{
    position: absolute;
    right: 2px;
    top: 2px;
    color: #67C23A;
}
.lou-item:hover{
    box-shadow: 0 0 10px 0 rgba(64, 158, 255,0.5);
}
.add-lou{font-size: 2rem;
line-height: 150px;
text-align: center;
color: #409EFF;
}
.lou-data{
    padding: 10px 10px 0px 10px;
}
.lou-name{
    text-align: center;
    padding: 25px 0 10px 0;
    font-size: 24px;
    color: #409EFF;
    font-style: italic;
    overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.page-p{
    padding: 20px;
    text-align: right;
}

</style>
